<!--
 * @Date: 2024-03-20 10:21:06
 * @Author: LiSong
 * @LastEditors: LiSong
 * @LastEditTime: 2024-12-04 14:20:50
 * @Description: 添加或修改菜单弹窗
-->
<template>
	<rk-dialog :="dialogOptions" :visible="visible" @close="visible = false">
		<template #default>
			<MenuInfoForm
				ref="menuInfoFormRef"
				:parentNode="parentNode"
				:btnTypeCode="btnTypeCode"
				:echoFormData="echoFormData"
			/>
		</template>
		<template #footer>
			<el-button type="primary" @click="handleConfirm">确定</el-button>
			<el-button @click="handleClose">取消</el-button>
		</template>
	</rk-dialog>
</template>

<script setup>
import XEUtils from 'xe-utils';
import MenuInfoForm from '../components/MenuInfoForm.vue'
import { MENU_TYPE_CONS } from '@/enums/enums-menu.js';
import { ElMessage } from 'element-plus';
import { useMenuApi } from '@/api';
import { reactive } from 'vue';

const { addMenu, updateMenu } = useMenuApi();

// emits
const emits = defineEmits(['confirm', 'close']);

// 组件的传参
const props = defineProps({
	parentNode: { type: Object },
});

// emits 相关
const emitConfirm = () => {
	emits('confirm');
};
const emitClose = () => {
	emits('close');
};

const modeOfTitle = {
	add: { value: 'add', title: '添加菜单' },
	edit: { value: 'edit', title: '修改菜单' },
	info: { value: 'info', title: '查看菜单' },
};

// ----- 弹出层相关配置
const config = reactive({
	type: modeOfTitle.add.value,
	title: modeOfTitle.add.title,
});
const dialogOptions = reactive({
	title: config.title,
	width: '60%',
	height: '75%',
	maskClosable: false,
	destroyOnClose: true,
})
// 显示隐藏弹窗
const visible = ref(false);
// 弹窗面板模式 add|edit|info
const btnTypeCode = ref('add');
// 用于回显的数据
const echoFormData = ref({});
// 表单模板引用对象
const menuInfoFormRef = ref();

/**
 * 对外暴露的添加方法
 *
 * @param {Object} param {
 *  currentRow, // 表格选中的row
 *  parentNode, // 选中的父节点
 *  tableData, // 表格数据
 * }
 */
const handleAdd = ({ currentRow, parentNode, tableData }) => {
	config.type = modeOfTitle.add.value;
	config.title = modeOfTitle.add.title;
	btnTypeCode.value = modeOfTitle.add.value;
	handleOpen({ currentRow, parentNode, tableData });
};
/**
 * 对外暴露的修改方法
 *
 * @param {Object} param {
 *  currentRow, // 表格选中的row
 *  parentNode, // 选中的父节点
 *  tableData, // 表格数据
 * }
 */
const handleEdit = ({ currentRow, parentNode, tableData }) => {
	config.type = modeOfTitle.edit.value;
	config.title = modeOfTitle.edit.title;
	btnTypeCode.value = modeOfTitle.edit.value;
	echoFormData.value = XEUtils.clone(currentRow, true);
	handleOpen({ currentRow, parentNode, tableData });
};
const handleOpen = ({ currentRow, parentNode, tableData }) => {
	const { menuCount, buttonCount } = getMenuCount({ parentNode, tableData });
	let echoForm = {
		// 级别
		levelNo: parentNode?.extraInfo.nextLevelNo,
		// 全路径
		fullUrl: parentNode?.extraInfo.nextFullUrl,
		// 菜单编码
		menuCode: '',
		// 父级节点
		parentId: parentNode?.menuCode,
		// 菜单排序
		menuOrder: menuCount + 1,
		// 菜单数量
		menuCount,
		// 按钮数量
		buttonCount,
		// 父级菜单名称
		parentMenuName: parentNode?.menuName,
	};
	echoFormData.value = { ...echoForm, ...currentRow };
	visible.value = true;
};
const handleReset = () => {
	visible.value = false;
};
const handleClose = () => {
	handleReset();
	emitClose();
};
const handleConfirm = async () => {
	const valid = await menuInfoFormRef.value.validateForm();
	if (valid) {
		handleSave();
	}
};
const handleSave = () => {
	const formData = menuInfoFormRef.value.getFormData();
	console.log('formData', formData);
	// if (btnTypeCode.value === 'add') {
	// 	addMenu(formData)
	// 		.then((res) => {
	// 			const { code, msg } = res;
	// 			if (code === 200) {
	// 				ElMessage.success('保存成功！');
	// 				handleReset();
	// 				emitConfirm();
	// 			} else {
	// 				ElMessage.error(msg);
	// 			}
	// 		})
	// 		.catch((err) => {
	// 			console.error(err);
	// 			ElMessage.error('保存失败！');
	// 		});
	// } else if (btnTypeCode.value === 'edit') {
	// 	updateMenu(formData)
	// 		.then((res) => {
	// 			const { code, msg } = res;
	// 			if (code === 200) {
	// 				ElMessage.success('保存成功！');
	// 				handleReset();
	// 				emitConfirm();
	// 			} else {
	// 				ElMessage.error(msg);
	// 			}
	// 		})
	// 		.catch((err) => {
	// 			console.error(err);
	// 			ElMessage.error('保存失败！');
	// 		});
	// }
};

/**
 * 获取所选节点下的菜单数量
 */
const getMenuCount = ({ parentNode, tableData }) => {
	// 是否为顶级节点
	const isTopNode = !parentNode.menuCode
	
	// 需要遍历的节点
	const nodes = isTopNode ? tableData : tableData[0].children
	const menuNodes = []
	const buttonNodes = []
	nodes.forEach(item => {
		// 菜单
		if (item.menuType === MENU_TYPE_CONS.MENU.value) {
			menuNodes.push(item)
		}
		// 按钮
		if (item.menuType === MENU_TYPE_CONS.BUTTON.value) {
			buttonNodes.push(item)
		}
	})

	// 返回数据
	return {
		menuCount: menuNodes.length || 0,
		buttonCount: buttonNodes.length || 0
	}
}

defineExpose({
	handleAdd,
	handleEdit,
	handleOpen,
});
</script>

<style lang="scss" scoped></style>
